/*
 * @Author: 
 * @Date: 2022-02-15 15:50:56
 * @LastEditors: lqj
 * @LastEditTime: 2022-02-16 09:49:28
 * @Description: context传值
 */
import React, { useState, createContext } from 'react'
import UpdateTheme from './Theme'

const MyContent = createContext()
const testOdd = createContext(123)
MyContent.displayName = 'MyDisplayName'
testOdd.displayName = 'testOddMyDisplayName'

function ContentPage() {
  const [user] = useState({ name: 'Avatar' })
  const [avatarSize] = useState('14px')
  const [obj] = useState({
    name: 'Tom',
    age: 18,
    sex: 'man'
  })
  const userLink = (
    <>
      <Avatar user={user} size={avatarSize} />
    </>
  )
  return (
    <>
      <MyContent.Provider value={obj}>
        <PageLayout userLink={userLink} />
      </MyContent.Provider>
      <UpdateTheme className="mt10"></UpdateTheme>
    </>
  )
}

class PageLayout extends React.Component {
  static contextType = testOdd
  componentDidMount() {
    // console.log(this.context)
  }
  render() {
    return (
      <>
        <NavigationBar userLink={this.props.userLink}></NavigationBar>
      </>
    )
  }
}
// PageLayout.contextType = testOdd

function NavigationBar (props, context) {
  return (
    <>
      <MyContent.Consumer>
        {
          value => {
            {/* console.log(value) */}
          }
        }
      </MyContent.Consumer>
      {
        props.userLink
      }
    </>
  )
}

function Avatar(props) {
  return (
    <>
      <span style={{ style: props.avatarSize }}>{props.user.name}</span>
    </>
  )
}

export default ContentPage